<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const value = 20; // 进度值
      const radius = 120; // 进度条的半径
      const center = [300, 264]; // 进度条的中心点（像素值）

      // 计算图标的位置
      const angle = (180 * value) / 100; // 将进度值转换为角度
      const radian = (angle * Math.PI) / 180; // 将角度转换为弧度
      const iconX = center[0] + radius * Math.cos(radian); // 图标的 x 坐标
      const iconY = center[1] - radius * Math.sin(radian); // 图标的 y 坐标

//       const option = {
//         title: [{
//           text: value + '%',
//           left: 'center',
//           top: '56%',
//           textStyle: {
//             color: '#c00',
//             fontSize: 20,
//             fontWeight: 'bold',
//           }
//         }],
//         angleAxis: {
//           show: false,
//           max: 100 * 360 / 180,
//           type: 'value',
//           startAngle: 180,
//           splitLine: {
//             show: false
//           }
//         },
//         barMaxWidth: 20,
//         radiusAxis: {
//           show: false,
//           type: 'category'
//         },
//         polar: {
//           center: ['50%', '66%'], // 圆心位置（百分比）
//           radius: '120%'
//         },
//         series: [{
//           type: 'bar',
//           data: [{
//             value: value,
//             itemStyle: {
//               color: {
//                 type: 'linear',
//                 x: 0,
//                 y: 0,
//                 x2: 1,
//                 y2: 1,
//                 colorStops: [
//                   { offset: 0, color: '#3ea0ff' },
//                   { offset: 1, color: '#3ea0ff00' }
//                 ]
//               }
//             }
//           }],
//           label:{ //显示在文本上的字
//                 show:true,
//                 position:"insideRight",
//                 distance:10,
//                 align:"left",
//                 formatter:function(params){
//                     return "{img|}"
//                 },
//                 rich:{
//                     img:{
//                         backgroundColor:{
//                             // image:"图片链接/路径"
//                             image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3762380421,1758877886&fm=26&gp=0.jpg"
//                         },
//                         width:20,
//                         height:20,
//                         padding:[0,0,0,0]
//                     }
//                 }
//             },
//           barGap: '-100%',
//           coordinateSystem: 'polar',
//           z: 1
//         }],
//         graphic: [
//   {
//     type: 'rect',
//     left: iconX - 10,
//     top: iconY - 10,
//     shape: {
//       width: 20,
//       height: 20
//     },
//     style: {
//       fill: 'red'
//     }
//   }
// ]
//       };

const option = {
    backgroundColor:"#e4eef9",
    grid:{
      top:"3%",
      right:"6%",
      left:"18%",
      bottom:"20%",
    },
    xAxis: {
        show:false,
    },
    yAxis: {
        type: 'category',
        axisLine:{show:false},  //去除y轴线
        axisTick:{show:false},  // 去除刻度
        axisLabel:{   //坐标轴文字设置
            color:"#333",
            fontSize:14,
            margin:4,
            width:180,
            formatter:function(val){
                return val.length >5? "{b|"+val.substr(0,5)+"..."+"}" : "{a|"+val+"}";
            },
            rich:{
                a:{
                    color:"#333",
                    fontSize:16,
                    width:180,
                    align:"center",
                    padding:[0,0,0,40]
                },
                b:{
                    color:"#666",
                    fontSize:16,
                    width:160,
                    align:"right",
                    padding:[0,0,0,12]
                },
            }
        },
        data:["零售业务和批发","计算机、电信行业","传统文化、教育","手机通讯和电子设备","金属冶炼行业"],
        inverse:true
    },
    series: [
        {
            type: 'bar',
            barWidth:"5", //柱状图宽度
            showBackground: true, //显示背景颜色
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.5)',
                barBorderRadius:[10,10,10,10],
            },
            data: [60, 40,26, 16, 12],
            label:{ //显示在文本上的字
                show:true,
                position:"insideRight",
                distance:10,
                align:"left",
                formatter:function(params){
                    return "{img|}"
                },
                rich:{
                    img:{
                        backgroundColor:{
                            // image:"图片链接/路径"
                            image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3762380421,1758877886&fm=26&gp=0.jpg"
                        },
                        width:20,
                        height:20,
                        padding:[0,0,0,0]
                    }
                }
            },
            itemStyle:{
                normal:{
                    // 每个数据的颜色
                    color:function(params){
                        if(params.dataIndex <=2){
                            return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#2572fe'},
                                    {offset: 1, color: '#09bbdf'}
                                ]
                            )
                        }else{
                             return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#f7d23b'},
                                    {offset: 1, color: '#09bbdf'}
                                ]
                            )
                            
                        }
                    },
                    barBorderRadius:[30,30,30,30], //圆角大小
                    shadowBlur:10, //模糊程度
                    shadowColor:"rgba(0,103,255,0.3)", //颜色
                    shadowOffsetX:-5,
                    shadowOffsetY:5,
                },
            },
            z:2,
            animation:true,
            animationEasing:"cubicOut",
            animationDuration:function(){
                return 3000;
            }
        },
        {
            name:"",
            type:"bar",
            barWidth:"5",
            barCategoryGap:"30%",
            slient:true,
            barGap:"-100%",
            itemStyle:{
                normal:{
                    barBorderRadius:7,
                    color:"#1b2046"
                }
            },
            label:{
                show:true,
                position:["100%,0%"],
                offset:[10,0],
                fontSize:22,
                formatter:function(params){
                    return params.data+"%"
                },
                rich:{
                    a:{
                        fontSize:30,
                        color:"#20c5b1",
                        fontWeight:"bold",
                    },
                    b:{
                        fontSize:30,
                        color:"#9497a0"
                        
                    },
                }
            },
            z:1,
            data: [100, 100,100, 100, 100]
        }
    ]
};

      myChart.setOption(option);
    }
  }
};
</script>